<template>
	<div class="wrapper">
           <div class="pl12 pb12 pr12">
                <Card class="Position">
                  <div class="messageCom message300" ref="list0">
                    <p class="wh1 Position maC span-message1">
                      <span class="lineTitle"></span>
                      <span class="size5 lineTitlePa">预警信息</span>
                      <span class="size6">{{WarningNews.length}}</span>

                      <span class="size5">类</span>
                    </p>
                    <p
                      class="wh1 flex maC Position span-message"
                      :id="`lis${index}`"
                      v-for="(item,index) in WarningNews"
                      :key="index"
                    >
                      <a href="javascript:void(0);" @click="warningNewsClick(item)">
                        <span class="dian"></span>
                        <span
                          class="span-Eli Ellipsis"
                          :style="{width:Width+'px'}"
                        >{{item.warningName}}</span>
                        <span class="message-timer">{{item.count}}条</span>
                      </a>
                    </p>
                  </div>
                </Card>
              </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import { fromPost, screenW, onSize } from '@/libs/tool'
import {    getWarning} from '@/api/moduleIndex.js'
export default {
	name: 'design-warn-news',
	components: {},
	props: {},
	data() {
		return {
			userInfo: '', //用户信息
			accessToken: '',
			Width: 0, //新闻宽度超出显示省略号
			screenWidth: screenW(), //屏幕宽度
			      WarningNews: [],
		}
	},
	watch: {
		watch: {
			screenWidth(val) {
				this.screenWidth = val
				this.onWidth()
			},
		},
	},
	computed: {},
	methods: {
		fromSummit: fromPost,
		init() {
            let userInfo = JSON.parse(Cookies.get('userInfo'))
            this.accessToken = this.getSession('accessToken')
			this.getWarning()
		},
		moreClick(type, name, path) {
			this.setStore('moreDetailType', {
				type: type,
				name: name,
				path: path,
			})
			this.$router.push({
				path: path,
			})
		},
	   warningNewsClick(item) {
      if (item) {
        let data = {
          authToken: this.accessToken,
          templateName: "waringinfo",
          infoID: item.functionName
        };
        fromPost(this.Warning, data);
      }
    },
	 getWarning() {
      //预警
      getWarning().then(res => {
        if (res.code == 200) {
          let data = res.result;
          let that = this;
          let ID = this.userInfo.idcardEncryption;
          data.forEach(function(item) {
            that.Warning = item.subUrl;
            apiTest({
              message: {
                method: "getWarningCountByUserCode",
                data: {
                  receiver: "JQFO",
                  sender: "PORTAL",
                  userCode: that.userInfo.idcard //that.userInfo.idcard
                }
              },
              url: item.url
            }).then(response => {
              let data = response.data;
              if (data) {
                that.WarningNews = data.items;
              }
            });
          });
        } else {
          this.$Message.error(res.message);
        }
      });
    },
           onWidth() {
      let that = this;
      setTimeout(function() {
        that.Width= that.$refs.list0.clientWidth - 160;
      }, 0);
    },
	},
	created() {
		this.init()
	},
	mounted() {
		onSize(this, 'screenWidth') //监听赋值
		this.onWidth() //动态的添加宽度为了本页面的省略号才搞的
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
	height: 100%;
}
</style>
<style lang="less">
@import './less/home.less';
@import '../../styles/common.less';
.my-card {
	.ivu-card-body {
		padding: 10px 12px;
	}
}
.my-card1 {
	.ivu-card-body {
		padding: 0;
	}
}
</style>
<style scoped lang="less">
@import './less/page_home.less';
.demo-carousel {
	width: 100%;
	height: 100%;
}
.page_home_main {
	height: 100%;
}
.page_home_scroll {
	height: 100%;
	width: 100%;
}
</style>